<template>
  <view class="index-page">
    <!-- 顶部轮播 -->
    <swiper class="banner" indicator-dots circular autoplay interval="3000">
      <swiper-item v-for="(item, i) in banners" :key="i">
        <image :src="item" class="banner-img" mode="widthFix"></image>
      </swiper-item>
    </swiper>

    <!-- 功能网格 -->
    <view class="function-grid">
      <view class="grid-item" @click="toPage('/pages/activity/list')">
        <view class="grid-icon">
          <image src="/static/icons/activity.png" mode="widthFix"></image>
        </view>
        <text class="grid-text">校园活动</text>
      </view>
      <view class="grid-item" @click="toPage('/pages/secondhand/list')">
        <view class="grid-icon">
          <image src="/static/icons/secondhand.png" mode="widthFix"></image>
        </view>
        <text class="grid-text">二手交易</text>
      </view>
      <view class="grid-item" @click="toPage('/pages/lostfound/list')">
        <view class="grid-icon">
          <image src="/static/icons/lostfound.png" mode="widthFix"></image>
        </view>
        <text class="grid-text">失物招领</text>
      </view>
      <view class="grid-item" @click="toPage('/pages/forum/list')">
        <view class="grid-icon">
          <image src="/static/icons/forum.png" mode="widthFix"></image>
        </view>
        <text class="grid-text">校园论坛</text>
      </view>
    </view>

    <!-- 动态流（最近活动/热门帖子） -->
    <view class="feed-section">
      <view class="section-title">
        <text>最近活动</text>
        <text class="more" @click="toPage('/pages/activity/list')">更多 →</text>
      </view>
      <view class="feed-list">
        <Card 
          v-for="(item, i) in hotActivities" 
          :key="i" 
          :title="item.title"
          :desc="item.desc"
          :time="item.time"
          :image="item.image"
          @click="toPage(`/pages/activity/detail?id=${item.id}`)"
        ></Card>
      </view>
    </view>

    <!-- 悬浮发布按钮 -->
    <PublishBar @click="toPage('/pages/activity/publish')"></PublishBar>
  </view>
</template>

<script>
import Card from '../../components/Card.vue'
import PublishBar from '../../components/PublishBar.vue'

export default {
  components: { Card, PublishBar },
  data() {
    return {
      banners: [
        '/static/images/banner1.jpg',
        '/static/images/banner2.jpg'
      ],
      hotActivities: [
        {
          id: 1,
          title: "1",
          desc: "地点：更衣室 | 时间：1月1日 45:14",
          time: "2小时前",
          image: "/static/images/activity1.jpg"
        },
        {
          id: 2,
          title: "2",
          desc: "地点： | 时间：10月30日 18:30",
          time: "1天前",
          image: "/static/images/activity2.jpg"
        }
      ]
    }
  },
  methods: {
    toPage(url) {
      uni.navigateTo({ url })
    }
  }
}
</script>

<style scoped>
.banner {
  width: 100%;
  height: 300rpx;
}
.banner-img {
  width: 100%;
  height: 100%;
  border-radius: 0 0 var(--radius) var(--radius);
}

.function-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx 20rpx;
  background-color: #fff;
  margin: 20rpx;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.grid-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15rpx;
}
.grid-icon {
  width: 100rpx;
  height: 100rpx;
  background-color: var(--primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-icon image {
  width: 50rpx;
  height: 50rpx;
}
.grid-text {
  font-size: 26rpx;
  color: var(--text-secondary);
}

.feed-section {
  padding: 0 20rpx 20rpx;
}
.section-title {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  font-size: 32rpx;
  font-weight: bold;
}
.more {
  font-size: 26rpx;
  color: var(--primary);
  font-weight: normal;
}
.feed-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
</style>